<div v-cloak id="app" class="main-content">
    <one-tabs :option="tabData" @change="handleChange"></one-tabs>
    <one-table :option="tableOption" :data="tableData" :loading="loading" @current-change="" @size-change="">
        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
                title="删除不能恢复,确定删除吗？" @confirm="deleteTemplate(scope.row,scope.index)">
                <el-button slot="reference" title='删除不能恢复' size="mini" class="_tool" type="danger">
                    <i class="el-icon-delete"></i>
                </el-button>
            </el-popconfirm>
        </template>
        <!-- 自定义列 -->
        <template slot="create_time" slot-scope="scope">
            <span>{{dateFormat(scope.row.create_time)}}</span>
        </template>
        <template slot="user_desc" slot-scope="scope">
            <span :title="scope.row.user_desc">{{scope.row.user_desc}}</span>
        </template>
        <template slot="empty">
            请检查票据及TOKEN设置
        </template>
 
    </one-table>
</div>
{include file='common@components/one-tabs'}
{include file='common@components/one-table'}

<script>
    const _tableData = {:json_encode($table_data, 256)};
    const _tabData = {:json_encode($tab_data, 256)};
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                tabData:_tabData,
                tableData: _tableData || [],
                tableOption: {
                    index: true,
                    operates: {width: 60},
                    header: false,
                    size: 'mini',
                    page: false,
                    column: [{
                        label: '模板ID',
                        prop: 'template_id',
                        width: 100,
                    }, {
                        label: '版本号',
                        prop: 'user_version',
                        width: 100,
                    }, {
                        label: '上传人员',
                        prop: 'developer',
                        width: 160,
                    }, {
                        label: '描述',
                        align: 'left',
                        slot:true,
                        prop: 'user_desc'
                    }, {
                        label: '添加时间',
                        prop: 'create_time',
                        slot: true,
                        width: 160,
                    }, ]
                }
            }
        },

        created() {

        },
        mounted() {
           
        },
        methods: {
            //时间格式化
            dateFormat: function (val) {
                var t = new Date(val*1000)
                if(!t){
                    return ''
                }
                let year = t.getFullYear()
                let month = this.dateIfAddZero(t.getMonth()+1)
                let day = this.dateIfAddZero(t.getDate())
                let hours = this.dateIfAddZero(t.getHours())
                let minutes = this.dateIfAddZero(t.getMinutes())
                let seconds = this.dateIfAddZero(t.getSeconds())
                return year + '-' + month + '-' + day+ ' ' + hours + ':' + minutes+ ':' + seconds
            },
            dateIfAddZero : function (time) {
                return time < 10 ? '0' + time : time  
            },
            // 切换标签
            handleChange(item) {
                window.location.href = item.url
            },
            //清空数据
            deleteTemplate(row,index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'one_wxopen/wemini/template',
                    },
                    data:{template_id:row.template_id},
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    _this.loading = false
                    if(e.data.code ==0 && index !=null){
                        _this.tableData.splice(index, 1)
                    }
                })
            },
        }
    })
</script>
<style>
    .el-table_1_column_6 div.cell{
        overflow: hidden;
        white-space: nowrap!important;
    }
</style>